<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_计算属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root"> 
            <input type="text" placeholder="请输入姓" v-model="firstName"><br><br>
            <input type="text" placeholder="请输入名" v-model="lastName"><br><br>
            <span>全名：{{fullName}}</span><br><br>
            <span>全名：{{fullName}}</span><br><br>
            <span>全名：{{fullName}}</span><br><br>
            <span>全名：{{fullName}}</span><br><br>
        </div>

        <script>
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                computed: {
                  fullName:{
                    get(){
                        console.log("正在获取计算属性")
                        return this.firstName + "-" + this.lastName
                    },

                    set:function(value){
                        console.log("正在设置属性",value)
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                  }
                }
            })
        </script>
    </body>
</html>